<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/base.css"/>
    <link rel="stylesheet" href="./css/index.css"/>
    <link rel="stylesheet" href="./css/animate.min.css"/>

</head>
<body>
    <div id="fullpage">
        <!--第一屏-->
        <div class="section first">
            <!--个人头像-->
            <div class="w">
                <div class="pic">
             <div class="pic-img ">
                <img src="./images/Minions.jpg " alt=""/>
            </div>
        </div>
        <!--个人资料-->
        <div class="info">
            <div class="first-line"></div>
            <div class="introuce">
                <h1 class="headList headList-1">李金岩  23岁</h1>
                <h1 class="headList headList-2">毕业于内蒙古科技大学-软件工程专业(本科)</h1>
                <h1 class="headList headList-3">求职:web前端工程师(全职/实习)</h1>
            </div>
        </div>
            </div>
    </div>
    <!--第二屏-->
    <div class="section bgc">
        <div class="w">
            <img src="images/ban_bg.png" alt="" class="second_img">
            <h1 class="second">专业技能</h1>
            <div class="listyle_top listyle_top1">
                <div class="circle_top"></div>
                <ul>
                    <li>熟练使用html标签</li>
                    <li>注重标签语义化</li>
                    <li>理解w3c标准</li>
                    <li>了解html5新特性</li>
                </ul>
            </div>
            <div class="listyle_top listyle_top2">
                <div class="circle_top2"></div>
                <ul>
                    <li>熟练使用Js,Jquery</li>
                    <li>了解Jquery的底层源码</li>
                    <li>Bootstrap快速开发</li>
                    <li>zepto进行移动端开发</li>
                </ul>
            </div>
            <div class="listyle_top listyle_top3">
                <div class="circle_top3"></div>
                <ul>
                    <li>响应式布局</li>
                    <li>flex布局</li>
                    <li>nunjucks,art-template模板引擎</li>
                    <li>rem进行适配</li>
                </ul>
            </div>
            <div class="listyle_top listyle_top4">
                <div class="circle_top4"></div>
                <ul class="last">
                    <li>了解自动化构建工具</li>
                    <li>熟悉nodeJs</li>
                    <li>express框架</li>
                    <li>理解MVC,MVVM思想</li>
                </ul>
            </div>
         </div>
    </div>
    <!--第三屏-->
    <div class="section" id="three">
            <canvas id="cas" width="800" height="600"></canvas>

        <div class="w three">
            <h1 class="third">个人作品:</h2>
            <div class="third_a">
                <a href="http://ljyco.oschina.io/introduction-lol">英雄联盟网站 (点击进入)</a><br/>
                <a href="https://git.oschina.net/LJYco/introduction_student-manger">学生信息管理系统nodeJs项目(码云地址 点击进入)</a><br/>
                <a href="https://git.oschina.net/LJYco/introduction_node-proxy">包含代理层的后台管理系统(node_proxy)(码云地址点击进入)</a>
                <a href="http://ljyco.oschina.io/introduction_h5" "email me">移动端demo (点击进入)</a>
                <a href="http://ljyco.oschina.io/introduction_zhenhua/" "email me">Bootstrap项目 (点击进入)</a>
            </div>
        </div>

    </div>
    <!--第四屏-->
    <div class="section">
        <div class="w four" >
            <h1 class="headList headList1">联系方式:</h1>
            <h2 class="headList headList2"align="">电话:15561457185</h2>
            <h2 class="headList headList3">邮箱:353834057@qq.com</h2>
            <h2 class="headList headList4">感谢观看</h2>
        </div>

    </div>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.fullPage.min.js"></script>
<script src="./js/canvas.js"></script>
<script>
    $('#fullpage').fullpage({
        sectionsColor : ['#0da5d6', '#2AB561', '#ffffff', '#16BA9D'],
        afterLoad: function (arc, key) {
            // console.log(arc, key);
            //current还没写
            // 将所有屏的current移除
            $('.section').removeClass('current');

            // 设置延时
            setTimeout(function () {
                // 当前屏的DOM元素
                $('.section').eq(key - 1).addClass('current');
            }, 50);
        }
    });
    //$(".pic-img")

</script>
</body>
</html>